<template>
  <div>
    <el-card>
      <category-selector @categoryChange="handleCategoryChange"/>
    </el-card>

    <el-card style="margin-top: 20px;">

      <div v-show="visibleStatus===1">
        <el-button type="primary" icon="el-icon-plus" @click="showAddSpu">添加SPU</el-button>
        <el-table
          style="margin: 20px 0;"
          border
          :data="spuList"
          row-key="id">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center">
          </el-table-column>

          <el-table-column
            prop="spuName"
            label="SPU名称">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述">
          </el-table-column>
          <el-table-column
            label="操作">
            <template v-slot="{row}">
              <hint-button @click="showAddSku(row)" type="primary" icon="el-icon-plus" title="添加SKU"></hint-button>
              <hint-button @click="showUpdateSpu(row)" type="primary" icon="el-icon-edit" title="修改SPU"></hint-button>
              <hint-button type="info" icon="el-icon-info" title="查看SKU列表" @click="showSkuList(row)"></hint-button>
              <hint-button type="danger" icon="el-icon-delete" title="删除SPU"></hint-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getSpuList"
          @size-change="handleSizeChange"
          style="margin-top: 20px; text-align: center;"
          :current-page="page"
          :page-sizes="[3, 6, 9]"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, jumper, ->, sizes, total"
          >
        </el-pagination>

        <el-dialog :title="spu.spuName" :visible.sync="isShowDialog">
          <el-table :data="skuList" v-loading="loading">
            <el-table-column property="skuName" label="名称"></el-table-column>
            <el-table-column property="price" label="价格(元)"></el-table-column>
            <el-table-column property="weight" label="重量(KG)"></el-table-column>
            <el-table-column label="默认图片">
              <template v-slot="{row}">
                <el-image :src="row.skuDefaultImg" style="width: 100px;height: 80px"></el-image>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>

      <SpuForm ref="spuForm" v-show="visibleStatus===2" @success="handleSuccess" @cancel="visibleStatus=1"/>

      <!-- @update:visible="visibleStatus=$event" -->
      <SkuForm ref="skuForm" :visible.sync="visibleStatus" />

    </el-card>

  </div>
</template>

<script>
import SpuForm from '../components/SpuForm.vue'
import SkuForm from '../components/SkuForm.vue'

export default {
  name: 'SpuList',

  components: {
    SpuForm,
    SkuForm
  },

  data () {
    return {
      spuList: [],
      page: 1,
      total: 0,
      pageSize: 3,
      category1Id: '',
      category2Id: '',
      category3Id: '',

      isShowDialog: false, // 标识是否显示dialog
      skuList: [], // 要显示的sku的列表
      spu: {}, // 要显示sku列表的spu对象
      loading: false, // 是否显示loading

      visibleStatus: 1, // 1: spu列表, 2: spuForm, 3: skuForm
    }
  },

  async mounted () {
    // const result = await this.$API.spu.getList(1, 3, 61)
    // console.log(result)

    // 方便测试
    this.category1Id = 2
    this.category2Id = 13
    this.category3Id = 61
    // 获取第一页显示
    this.getSpuList()
  },

  methods: {

    /* 
    显示sku的添加界面
    */
    showAddSku (row) {
      // 显示sku的添加界面
      this.visibleStatus = 3

      // 准备数据
      row = {...row}  // 不想改变列表中的row的内部数据
      row.category1Id = this.category1Id
      row.category2Id = this.category2Id
      row.category3Id = this.category3Id

      // 请求加载数据
      // console.log('-----', this.$refs.skuForm)
      this.$refs.skuForm.initAddData(row)
    },

    /* 
    处理spuForm保存数据成功的监听回调
    */
    handleSuccess () {
      // 显示列表
      this.visibleStatus = 1
      // 重新获取分页列表显示    更新是当前页, 添加是第一页
      this.getSpuList(this.spuId ? this.page : 1)
      // 清除保存的更新的标识
      this.spuId = null
    },

    /* 
    显示spu添加界面
    */
    showAddSpu () {
      // 显示spuForm
      this.visibleStatus = 2
      // 通知子组件加载添加需要的数据显示
      this.$refs.spuForm.initAddData(this.category3Id)
    },

    /* 
    显示spu更新界面
    */
    showUpdateSpu (spu) {
      // 保存要更新的spu的id
      this.spuId = spu.id

      // 显示spuForm
      this.visibleStatus = 2
       // 通知子组件加载更新需要的数据显示
      this.$refs.spuForm.initUpdateData(spu.id)
    },

    /* 
    显示指定spu下的所有sku的列表
    */
    async showSkuList (row) {
      // 更新数据
      this.isShowDialog = true
      this.spu = row
      this.loading = true
      // 发请求
      const result = await this.$API.sku.getListBySpuId(row.id)
      // 更新数据
      this.loading = false
      this.skuList = result.data
    },
    /* 
    当前页码发生改变的事件回调
    */
    /* handleCurrentChange (page) {
      this.getSpuList(page)
    }, */

    /* 
    每页数量发生改变的事件回调
    */
   handleSizeChange (pageSize) {
     this.pageSize = pageSize
     this.getSpuList(1)
   },

    /* 
    选择某个分类的监听回调
     */
    handleCategoryChange ({categoryId, level}) {
      if (level===1) {
        // 清除子级分类数据和分页数据
        this.category2Id = ''
        this.category3Id = ''
        this.spuList = []
        this.page = 1
        this.total = 0

        this.category1Id = categoryId
      } else if (level===2) {
        // 清除子级分类数据和分页数据
        this.category3Id = ''
        this.spuList = []
        this.page = 1
        this.total = 0
        this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
        // 发请求获取SPU分页列表显示
        this.getSpuList(1)
      }
    },

    /* 
    获取指定页码分页列表显示
    */
    async getSpuList (page=1) {
      // 更新页码
      this.page = page
      // 发请求
       const result = await this.$API.spu.getList(page, this.pageSize, this.category3Id)
       const {records, total} = result.data
       // 更新数据
       this.spuList = records
       this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
